<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		li {
			list-style: none;
			float: left;
			margin: 5px;
		}
		ul img {
			padding: 20px;

		}
	</style>

</head>
<body>
		<div>
		<span>头像的类型</span><img src="../day01/image/down.jpg" alt="">
		<ul>
			<li><img src="../day02/image/01.jpg" title="human-male-draw"></li>
			<li><img src="../day02/image/02.jpg" title="plant-male-photo"></li>
			<li><img src="../day02/image/03.jpg" title="animal-draw"></li>
			<li><img src="../day02/image/04.jpg" title="human-female-draw"></li>
			<li><img src="../day02/image/05.jpg" title="female-plant-photo"></li>
			<li><img src="../day02/image/1.jpg" title="view-photo"></li>
			<li><img src="../day02/image/3.jpg" title="human"></li>
			<li><img src="../day02/image/4.jpg" title="animal-male-draw"></li>
			<li><img src="../day02/image/bg.jpg" title="plant"></li>
			<li><img src="../day02/image/paw.jpg" title="animal-female-draw"></li>
		</ul>
	</div>

</body>
<script src="../jquery-3.3.1.min.js"></script>

<script>
	
	//给title都加上边框
	$("img[title]").css("border","3px solid black");

	//移除又人属性的框
	$("img[title = human]").css("border","none");

	//只要以plant开头或者就是plant的就加粗
	$("img[title |= plant]").css("border","10px solid black");

	//对于photo结尾的图片，边框变细
	$("img[title $= photo]").css("border","1px solid black")

	//出现male的，变背景色
	$("img[title *= -male]").css("background-color","pink");

	// $("img[title *= an]").css("background-color","red");
</script>
</html>